<template>
    <div style="">
        <vue-baberrage
                :isShow= "barrageIsShow"
                :barrageList = "barrageList"
                :loop = "barrageLoop"
                :lanesCount="3"
        >
        </vue-baberrage>
        <div style="border: 0px solid red;
        width:100%;margin-top: 300px;">
            <div style="display: flex;padding: 30px;">
                <el-input v-model="input" placeholder="请输入内容"></el-input>
            </div>
            <div style="display: flex;margin-top: 20px;">
                <el-button type="primary" @click="addDanmu" style="margin: 0 auto;">弹幕</el-button>
            </div>

        </div>
    </div>
</template>

<script>
import { MESSAGE_TYPE } from 'vue-baberrage'
export default {
    name: "DanMu",
    data(){
        return {
            msg: 'Hello vue-baberrage',
            barrageIsShow: true,
            currentId : 0,
            barrageLoop: false,
            barrageList: [],
            input: 'as1d21'
        }
    },
    mounted() {
      this.addDanmu()
      this.addDanmu()
      this.addDanmu()
      this.addDanmu()

    },
    methods: {
        addDanmu(){
            this.barrageList.push({
                id: ++this.currentId,
                avatar: "//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png",
                msg: this.input,
                time: 5,
                barrageStyle: "blue",
                type: MESSAGE_TYPE.NORMAL,
            });
            console.debug("add Danmu")
        },
    }
}
</script>

<style >
    .baberrage-stage{
        top: 20px;
        position: absolute;
        height: 300px !important;
        border: 1px solid red;
    }
    .blue{
        color: #61dafb;
        background: lawngreen;
        border-radius: 100px;
        padding: 0;
    }
    .baberrage-item{
        padding: 0px !important;
        background: lawngreen !important;

    }
    .baberrage-item .normal{
        background: lawngreen;
        background-color: lawngreen !important;
    }
    .baberrage-msg{
        color: #42b983;
    }
</style>